<!DOCTYPE html>
<html>
<head>
<title>Paste</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<script src="../../js/tinymce/tinymce.dev.js"></script>
<script src="../../js/tinymce/plugins/table/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/paste/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/spellchecker/plugin.dev.js"></script>
<script>
	tinymce.init({
		selector: "textarea",
		theme: "modern",
		plugins: [
			"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
			"save table contextmenu directionality emoticons template paste"
		],
		content_css: "css/development.css",
		add_unload_trigger: false,

		toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",

		style_formats: [
			{title: 'Bold text', format: 'h1'},
			{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
			{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
			{title: 'Example 1', inline: 'span', classes: 'example1'},
			{title: 'Example 2', inline: 'span', classes: 'example2'},
			{title: 'Table styles'},
			{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
		],

		setup: function(ed) {
			ed.on('PastePreProcess', function(e) {
				if (window.console && console.dir) {
					console.dir(e.type, e.content);
				}

				e.content = e.content.toUpperCase();
			});

			/*ed.on('focus blur', function(e) {
				if (window.console && console.log) {
					console.log(e.type);
				}
			});*/
		}
	});

	tinymce.init({
		selector: "#inline",
		plugins: 'paste',
		inline: true,
		setup: function(ed) {
			ed.on('PastePreProcess', function(e) {
				if (window.console && console.dir) {
					console.dir(e.type, e.content);
				}

				e.content = e.content.toUpperCase();
			});

			/*ed.on('focus blur', function(e) {
				if (window.console && console.log) {
					console.log(e.type);
				}
			});*/
		}
	});
</script>
</head>
<body role="application">
<form method="post" action="http://www.tinymce.com/dump.php?example=true">
	<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
		<pre>Pre element</pre>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
	</textarea>
	<div>
		<a href="javascript:;" onclick="tinymce.get('elm1').show();return false;">[Show]</a>
		<a href="javascript:;" onclick="tinymce.get('elm1').hide();return false;">[Hide]</a>
		<a href="javascript:;" onclick="tinymce.execCommand('mceAddEditor', false, 'elm1');return false;">[Add]</a>
		<a href="javascript:;" onclick="tinymce.get('elm1').remove();return false;">[Remove]</a>
		<a href="javascript:;" onclick="tinymce.get('elm1').execCommand('Bold');return false;">[Bold]</a>
		<a href="javascript:;" onclick="alert(tinymce.get('elm1').getContent());return false;">[Get contents]</a>
		<a href="javascript:;" onclick="alert(tinymce.get('elm1').getContent({format: 'raw'}));return false;">[Get raw]</a>
		<a href="javascript:;" onclick="alert(tinymce.get('elm1').selection.getContent());return false;">[Get selected HTML]</a>
		<a href="javascript:;" onclick="alert(tinymce.get('elm1').selection.getContent({format : 'text'}));return false;">[Get selected text]</a>
		<a href="javascript:;" onclick="alert(tinymce.get('elm1').selection.getNode().nodeName);return false;">[Get selected element]</a>
		<a href="javascript:;" onclick="tinymce.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');return false;">[Insert HTML]</a>
		<a href="javascript:;" onclick="tinymce.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');return false;">[Replace selection]</a>
	</div>

	<div id="inline" style="height: 200px; overflow: auto">
		<pre>Pre element</pre>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
		<p><strong>abc</strong>def</p>
	</div>
</form>

</body>
</html>
